<template>
  <div id="Home">
    <top></top>
    <div class="banner-list">
      <swiper loop :show-desc-mask="false" auto dots-position="center" :aspect-ratio="400/750">
        <swiper-item v-for="(item,index) in banner_list" :key="index">
          <a :href="item.url">
            <img :src="'./static/data/home/'+item.src" class="vux-img"/>
          </a>
        </swiper-item>
      </swiper>
    </div>
    <!--悬浮上拍按钮-->
    <!--<div class="button" @click="getShopInfo" v-model="show4">-->
      <!--<img src="../../assets/images/home/icon_add_button.png" alt=""/>-->
    <!--</div>-->
    <!--快捷入口-->
    <div class="menu-list">
      <ul>
        <li>
          <router-link to="AuctionCategory/category_id/1">
            <div>
              <img src="../../assets/images/home/icon_bowlder.png" alt=""/>
              <p class="item-text">珠宝玉石</p>
            </div>
          </router-link>
        </li>
        <li>
          <router-link to="AuctionCategory/category_id/3">
            <img src="../../assets/images/home/icon_bangle.png" alt=""/>
            <p class="item-text">木质竹韵</p>
          </router-link>
        </li>
        <li>
          <router-link to="AuctionCategory/category_id/6">
            <img src="../../assets/images/home/icon_redware.png" alt=""/>
            <p class="item-text">紫砂陶瓷</p>
          </router-link>
        </li>
        <li>
          <router-link to="AuctionCategory/category_id/2">
            <img src="../../assets/images/home/icon_tea.png" alt=""/>
            <p class="item-text">茶叶茶具</p>
          </router-link>
        </li>
        <li>
          <router-link to="AuctionCategory/category_id/7">
            <img src="../../assets/images/home/icon_fan.png" alt=""/>
            <p class="item-text">文玩杂项</p>
          </router-link>
        </li>
        <li>
          <router-link to="Zone">
            <img src="../../assets/images/home/icon_glass.png" alt=""/>
            <p class="item-text">限时秒杀</p>
          </router-link>
        </li>
        <li>
          <router-link to="AuctionCategory/category_id/5">
            <img src="../../assets/images/home/icon_wine.png" alt=""/>
            <p class="item-text">美酒滋补</p>
          </router-link>
        </li>
        <li>
          <router-link to="AuctionCategory/category_id/8">
            <img src="../../assets/images/home/icon_archaize.png" alt=""/>
            <p class="item-text">仿古藏品</p>
          </router-link>
        </li>
        <li>
          <router-link to="AuctionCategory/category_id/4">
            <img src="../../assets/images/home/icon_painting.png" alt=""/>
            <p class="item-text">字画古籍</p>
          </router-link>
        </li>

        <li>
          <router-link to="shop/shopIndex">
            <img src="../../assets/images/home/icon_course.png" alt=""/>
            <p class="item-text">商城入口</p>
          </router-link>
        </li>
      </ul>
      <group class="scroll">
        <img src="../../assets/images/home/icon_title.png" alt=""/>
        <marquee>
          <marquee-item duration="500" v-for="(item,index) in propeList" :key="index">
            <router-link :to="'Detail/id/' + item.auction_id">
              {{item.member_nickname.substr(0,1) + '***' +item.member_nickname.substr(item.member_nickname.length-1,1)}}&nbsp;&nbsp;对{{item.goods_name}}出价{{item.bidding_money}}
            </router-link>
          </marquee-item>
        </marquee>
      </group>
    </div>
    <!--正在热卖-->
    <div class="hotsale-list" v-if="hotSale == ''"></div>
    <div class="hotsale-list" v-else>
      <h2 class="title-box"><span class="index-title">正在热拍</span></h2>
      <div class="item">
        <div class="item-head">
          <div class="author">
            <img :src="'/los/uploads/thumb/shop/' + hotSale.shop_id + '_78X78.jpeg'" class="shopPic"/>
            <div class="info">
              <p class="name">{{hotSale.shop_name}}<span class="level"><i class="icon-level"></i><label
                id="label">4.8</label>分</span></p>
              <p class="addtime">{{common.timestampToTime(hotSale.add_time)}}</p>
            </div>
            <span class="focus overflow vux-1px" v-if="hotSale.follow_state == 1" @click="shopConcern(hotSale.shop_id)">已关注</span>
            <span class="focus vux-1px" v-else @click="shopConcern(hotSale.shop_id)">关注</span>
          </div>
        </div>
        <div class="item-body">
          <router-link :to="'/Detail/id/' + hotSale.auction_id">
            <div class="tolink">
              <div class="img">
                <img :src="'/los/uploads/thumb/goods/' + hotSale.goods_id + '_710X348.jpeg'"/>
              </div>
              <div class="endtime">
                <i class="re-icon icon-time"></i>
                <count-down v-if="cache" :currentTime="curTime" :startTime="hotSale.auction_starttime"
                            :endTime="hotSale.auction_endtime" :tipText="'距开始'" :tipTextEnd="'距结束'" :endText="'已结束'"
                            :dayTxt="'天'" :hourTxt="'时'" :minutesTxt="'分'" :secondsTxt="'秒'"></count-down>
                <span class="count"><label id="count">{{hotSale.bidding_count}}</label> 次出价</span>
              </div>
              <span class="icon-hot"></span>
            </div>
          </router-link>
          <div class="info">
            <div class="name">{{hotSale.goods_name}}</div>
            <div class="deliver">
              <span v-if="hotSale.auction_return == 1"><label><i class="by-icon icon-refund"></i></label>售后</span>
              <span v-if="hotSale.auction_shipfee == 0"><label><i class="by-icon icon-email"></i></label>包邮</span>
            </div>
          </div>
          <div class="auction-info">
            <div class="info-price">
              <p class="current-price">当前价 <span id="current">￥{{hotSale.auction_bidprice}}</span></p>
              <ul>
                <li>
                  <p class="other-price">{{hotSale.auction_startprice}}</p>
                  <p>起拍价(元)</p>
                </li>
                <li>
                  <p class="other-price">{{hotSale.auction_step}}</p>
                  <p>加价幅度(元)</p>
                </li>
                <li>
                  <p class="other-price">{{hotSale.auction_deposit}}</p>
                  <p>保证金(元)</p>
                </li>
              </ul>
            </div>
            <a :href="'#/Detail/id/' + hotSale.auction_id" class="offer">立即<br/>出价</a>
          </div>
        </div>
        <div class="item-foot">
          <flexbox :gutter="0">
            <flexbox-item :span="6" class="tools-item address">
              <i class="pm-icon icon-address"></i>
              <span class="address" v-if="hotSale.shop_address == '' || hotSale.shop_address == null">暂无</span>
              <span class="address" v-else>{{hotSale.shop_address}}</span>
            </flexbox-item>
            <flexbox-item class="tools-item other">
              <a href="javascript:;">
                <i class="pm-icon icon-eye"></i>
                <span>{{hotSale.auction_vcount}}</span>
              </a>
            </flexbox-item>
            <flexbox-item class="tools-item other">
              <a href="javascript:;" v-if="hotSale.like_state == 1" @click="like(hotSale.auction_id)">
                <i class="pm-icon icon-like_on"></i>
                <span style="color: #a30000;">{{hotSale.auction_vlike}}</span>
              </a>
              <a href="javascript:;" v-else @click="like(hotSale.auction_id)">
                <i class="pm-icon icon-like"></i>
                <span>{{hotSale.auction_vlike}}</span>
              </a>
            </flexbox-item>
            <flexbox-item class="tools-item other">
              <a href="javascript:;" @click="share(hotSale.auction_id)">
                <i class="pm-icon icon-share"></i>
                <span>{{hotSale.auction_vshare}}</span>
              </a>
            </flexbox-item>
          </flexbox>
        </div>
      </div>
    </div>
    <!--
                作者：873546057@qq.com
                时间：2018-05-02
                描述：店铺推荐
            -->
    <div class="expert-list">
      <h2 class="title-box" style="padding: 0.26rem 0.26rem 0.16rem;">
        <span class="index-title">店铺推荐</span>
        <img @click="getShopRec()" src="../../assets/images/home/icon_change.png" alt=""/>
        <b @click="getShopRec()">换一批</b>
      </h2>
      <div class="wrapper">
        <div class="list" id="list">
          <div class="expert-item" v-for="(item,index) in shopRec">
            <div @click="goShopPage(item.shop_id)">
              <img :src="'../../static/data/home/' + item.img "/>
              <p class="name">{{item.shop_name}}</p>
              <p class="good">共有<span class="count" id="good">{{item.auction_num}}</span>件拍品</p>
            </div>

            <a href="javascript:;" @click="item.follow_state = 0" v-if="item.follow_state == 1"
               class="focus overflow">已关注</a>
            <a href="javascript:;" @click="item.follow_state = 1" v-else class="onfocus">关注</a>
          </div>
        </div>
      </div>
    </div>

    <!--拍品列表-->
    <div class="product-list">
      <div class="tabWrap">
        <tab :class="tabBarFixed == true ? 'isFixed' :''" :line-width="2" active-color='#a30000'
             custom-bar-width="36px">
          <tab-item class="vux-center" v-for="item in tablist" :selected="item.name === '拍卖中'"
                    @on-item-click="getAuctionList(item.type)" :key="item.type">{{item.name}}
          </tab-item>
        </tab>
      </div>
      <div>
        <div class="list" v-if="status >0">
          <div class="item" v-for="(item,index) in shopList" :key="index">
            <router-link :to="'/Detail/id/' + item.auction_id">
              <span v-if="item.bidding_count == 0 && item.auction_endtime < cur_time" class="pass">已流拍</span>
              <div class="img">
                <img :src="'../../static/data/home/' + item.imgsrc "/>
                <div class="time">
                  <count-down v-if="cache" :currentTime="cur_time" :startTime="item.auction_starttime"
                              :endTime="item.auction_endtime" :tipText="'距开始'" :tipTextEnd="'距结束'" :endText="'已结束'"
                              :dayTxt="':'" :hourTxt="':'" :minutesTxt="':'" :secondsTxt="''">
                  </count-down>
                </div>
              </div>
              <div class="info">
                <p class="name"><span v-if="item.auction_deposit == 0">免保</span>{{item.goods_name}}</p>
                <p class="price">当前价:<span>￥{{item.auction_bidprice}}</span></p>
                <p class="liulan">
                  <i class="pm-icon icon-eye"></i>
                  <span> {{item.auction_vcount}}</span>
                </p>
              </div>
            </router-link>
          </div>
        </div>
        <div class="list" style="overflow: hidden;" v-else>
          <div class="no-data">
            <img src="../../assets/images/home/nodata.png"/>
          </div>
        </div>
      </div>

    </div>
    <!--分享图片显示-->
    <div id="light" class="white_content">
      <img :src="'/los' + shareImg" alt=""/>
    </div>
    <div id="fade" class="black_overlay"
         onclick="document.getElementById('fade').style.display='none';document.getElementById('light').style.display='none'"></div>

    <!--分享-->
    <popup v-model="show2" style="height: 2.6rem;background: #fff;">
      <div class="share-list">
        <div class="body">
          <ul>
            <li @click="qrcode()">
              <i class="fx-icon icon-qrcode"></i>
              <p class="name">二维码</p>
            </li>
            <li @click="copy()" class="tag-read" :data-clipboard-text="ShareLink">
              <i class="fx-icon icon-link"></i>
              <p class="name">复制链接</p>
            </li>
            <li>
              <i class="fx-icon icon-more"></i>
              <p class="name">点击右上角</p>
            </li>
          </ul>
        </div>
      </div>
    </popup>
    <!--喜欢-->
    <loading :show="show1" :text="text"></loading>

    <toast v-model="success" type="text" width='2.8rem' is-show-mask>{{msg}}</toast>
    <toast v-model="cancel" type="text" width='5rem' is-show-mask :time="800">{{msg}}</toast>
    <confirm v-model="show4" :show-cancel-button="false" title="对不起您尚未认证店铺" @on-confirm="onConfirm">
      <p style="text-align:center;">请前往认证</p>
    </confirm>
    <bottom></bottom>
  </div>
</template>

<script>
import { bannerList, biddingList, shopRec, auctionList } from '../../api/service'
import top from '../comp/Header';
import bottom from '../comp/Footer';
import $ from 'jquery';
import CountDown from 'vue2-countdown';
import BScroll from 'better-scroll';
import Clipboard from 'clipboard';
import wx from 'weixin-js-sdk';
import {
  Tabbar,
  InlineLoading,
  TabbarItem,
  ButtonTab,
  ButtonTabItem,
  Swiper,
  SwiperItem,
  Grid,
  GridItem,
  Flexbox,
  Toast,
  FlexboxItem,
  Popup,
  PopupHeader,
  Loading,
  Group,
  Tab,
  TabItem,
  Sticky,
  ViewBox,
  Previewer,
  Confirm,
  XHeader,
  XDialog,
  Cell,
  Marquee,
  MarqueeItem,
  dateFormat

} from 'vux';

export default {
  filters: {
    dateFormat
  },
  data() {
    return {
      advertList: [{
        index: 0,
        value: '全场保真  假一赔一'
      },
        {
          index: 1,
          value: '零门槛  零费用  人人可上拍'
        }
      ],
      propeList: [],
      banner_list: [],
      show: false,
      show1: false,
      show2: false,
      percent: 1 / 4,
      cache: true,
      cancel: false,
      text: '加载中',
      concernText: '关注',
      success: false,
      selected: '',
      show4: false,
      over: false,
      tabBarFixed: false,
      advertAlert: true,
      imgindex: '',
      shareImg: '',
      msg: '',
      likes: '32',
      typePrice: '',
      tablist: [{
        name: '预展中',
        type: '1'
      },
        {
          name: '拍卖中',
          type: '2'
        },
        {
          name: '已结束',
          type: '3'
        },
      ],
      listHeight: 0,
      globals: 2,
      hotSale: '',
      shopRec: [],
      shopList: [],
      shop_state: '',
      status: '',
      flag: true,
      cur_time: '',
      category_id: '',
      curTime: '',
      ShareLink: '',
      cateList: [],
      share_auction_id: '',
      scrollMore: [1, 2, 3],

      shopNum: 0
    }
  },
  components: {
    Tabbar,
    TabbarItem,
    Grid,
    GridItem,
    Swiper,
    SwiperItem,
    Flexbox,
    FlexboxItem,
    Popup,
    PopupHeader,
    Toast,
    Loading,
    Group,
    CountDown,
    BScroll,
    Tab,
    InlineLoading,
    TabItem,
    top,
    bottom,
    Sticky,
    ViewBox,
    Previewer,
    Confirm,
    XHeader,
    Cell,
    Marquee,
    XDialog,
    MarqueeItem
  },
  mounted() {
    this.getWXShare();
    this.getAuctionList(2);
    this.getBanner();
    this.getBiddingList();
    this.getHomeInfo();
    this.getShopRec();
    //达人推荐横向滚动
    let scroll = new BScroll('.wrapper', {
      scrollX: true,
      eventPassthrough: 'vertical'
    });
  },
  activated() {
    this.ShareLink = window.location.href;
    window.addEventListener('scroll', this.handleScroll);
  },
  deactivated() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  created() {
    $('#list').width(this.calwidth());
    this.listHeight = $('.product-list .list').outerHeight(true);
  },
  //方法
  methods: {
    onConfirm() {
      location.href = '#/Certification'
    },
    //获取banner图
    getBanner() {
      bannerList().then(result => {
          const data = result
          if (data.length > 0) {
            this.banner_list = result
          }
        }
      )
    },

    //获取商品分类信息列表
    getTypeInfo() {
      this.$http({
        method: 'GET',
        url: '/los/api/category/first_list.json',
        data: ''
      }).then((result) => {
        this.cateList = result.data.list;

      }).catch((err) => {
        console.log(err);
      })
    },
    //上下滑动轮播
    getBiddingList() {
      biddingList().then(result => {
        this.propeList = result
      }).catch(err => {
        console.log(err);
      })
    },

    //获取店铺信息 判断是否认证过  state=0 为认证
    getShopInfo() {
      if (window.sessionStorage.getItem("shop") == 'null') {
        this.show4 = !this.show4;
      } else if (JSON.parse(window.sessionStorage.getItem("member")).shop_id > 0 || JSON.parse(window.sessionStorage.getItem("shop")).shop_id > 0) {
        this.$http({
          method: 'GET',
          url: '/los/api/member/shop_info.json',
          data: ''
        }).then((result) => {
          if (result.data.code == 1) {
            this.shop_state = result.data.data.shop_state;
            if (this.shop_state == 0) {
              this.show4 = !this.show4;
            } else {
              location.href = '#/Upload'
            }
          }
        }).catch((err) => {
          console.log(err);
        })
      }

    },

    //获取热卖拍品数据
    getHomeInfo() {
      this.$http({
        method: 'GET',
        url: '/los/api/index/auction_rec.json',
        data: ''
      }).then((result) => {
        console.log(result);
        if (result.data.code == 1) {
          this.hotSale = result.data.data;
          this.curTime = result.data.cur_time;
        } else {
          this.hotSale == '';
        }

      }).catch((err) => {
        console.log(err);
      })
    },

    //获取店铺推荐信息
    getShopRec() {
      shopRec().then(result => {
        this.shopRec = []
        if (result.length > 0) {
          if (result.length > this.shopNum) {
            for (let i = this.shopNum; i < this.shopNum + 3; i++) {
              this.shopRec.push(result[i])
            }
            this.shopNum += 3
          } else {
            this.shopNum = 0
            this.getShopRec()
          }
        } else {
          this.shopRec = []
        }
      })
      // this.$http({
      //   method: 'GET',
      //   url: '/los/api/index/shop_rec.json',
      //   data: ''
      // }).then((result) => {
      //   if (result.data.code == 1) {
      //     this.shopRec = result.data.data;
      //   } else {
      //     this.shopRec = '';
      //   }
      // }).catch((err) => {
      //   console.log(err);
      // })
    },

    //获取带状态拍卖信息
    getAuctionList(index) {
      this.globals = index;
      auctionList().then(result => {
        this.cache = false;
        this.status = result.rows[index - 1].length;
        this.shopList = result.rows[index - 1];
        this.cur_time = result.cur_time;
        this.$nextTick(() => {
          this.cache = true;
        });
      })
      // $(window).scroll(function () {
      //   var htmlHeight = $(document).height();
      //   var clientHeight = $(window).height();
      //   var scrollTop = $(document).scrollTop();
      //   var overHeight = scrollTop + clientHeight;
      //   if (overHeight >= htmlHeight * 0.9) {
      //     if (more == true) {
      //       more = false;
      //       page += 1;
      //       if (_this.globals == index) {
      //         axios.get('/los/api/index/auction_list.json?ts=' + index + '&page=' + page).then(function (result) {
      //           $.each(result.data.data, function (index, val) {
      //             _this.shopList.push(val);
      //           });
      //           more = true;
      //           if (result.data.code == 0) {
      //             more = false;
      //           }
      //         }).catch(function (error) {
      //           console.log(error);
      //         });
      //       } else {
      //         return
      //       }
      //     }
      //   }
      // })
    },
    //滚动的函数
    handleScroll() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var offsetTop = document.querySelector('.product-list .tabWrap').offsetTop;
      if (scrollTop > offsetTop) {
        this.tabBarFixed = true;
        $('.list').css('margin-top', '0');
      } else {
        this.tabBarFixed = false;
        $('.list').css('margin-top', '0');
      }
    },
    //店铺关注成功
    shopConcern: function (shop_id) {
      this.$http({
        method: 'POST',
        url: '/los/api/shop/follow.json?shop_id=' + shop_id,
        data: ''
      }).then((result) => {
        console.log(result);
        this.success = !this.success;
        this.msg = result.data.msg;
        this.$nextTick(() => {
          this.getHomeInfo();
        })
      }).catch((err) => {
        console.log(err);
      })
    },

    request_get(request_url, success = function (data) {
    }, error = function (data) {
    }) {
      this.$http({
        method: 'get',
        url: request_url,
        data: ''
      }).then((result) => {
        success(result.data)
      }).catch((err) => {
        error(err);
      })
    },
    request_post(request_url, data, success = function (data) {
    }, error = function (data) {
    }) {
      this.$http({
        method: 'POST',
        url: request_url,
        data: data
      }).then((result) => {
        success(result.data)
      }).catch((err) => {
        error(err);
      })
    },

    //店铺推荐关注
    shopRecConcern: function (index, shop_id) {
      let _this = this;
      this.request_post('/los/api/shop/follow.json?shop_id=' + shop_id, [], function (res) {
        _this.success = !_this.success;
        _this.msg = res.msg;
        _this.shopRec[index].follow_state = res.data.follow_state;
      }, function (err) {
        console.log(err);
      });
    },
    //喜欢
    like(auction_id) {
      this.$http({
        method: 'POST',
        url: '/los/api/auction/like.json?auction_id=' + auction_id,
        data: ''
      }).then((result) => {
        console.log(result);
        this.success = !this.success;
        this.msg = result.data.msg;
        this.$nextTick(() => {
          this.getHomeInfo();
        });
      }).catch((err) => {
        console.log(err);
      })

    },

    //签到
    signIn: function () {
      this.$http({
        method: 'POST',
        url: '/los/api/member/signup.json',
        data: ''
      }).then((result) => {
        console.log(result);
        this.cancel = !this.cancel;
        this.msg = result.data.msg;
      }).catch((err) => {
        console.log(err);
      })
    },
    //分享二维码
    qrcode: function () {
      this.show1 = true;
      document.getElementById('light').style.display = 'block';
      document.getElementById('fade').style.display = 'block';
      this.show2 = !this.show2;
      let share_url = window.location.href;
      var params = {
        auction_id: this.share_auction_id,
        share_url: share_url
      }
      this.$http({
        method: 'POST',
        url: '/los/api/auction/share_pic.json',
        data: params
      }).then((result) => {
        if (result.data.code == 1) {
          this.shareImg = result.data.data.share_img_src;
          this.show1 = false;
        }
      }).catch((err) => {

      })
    },
    //复制链接分享
    copy() {
      var _this = this;
      var clipboard = new Clipboard('.tag-read');
      clipboard.on('success', function (e) {
        _this.success = !_this.success;
        _this.msg = '复制成功';
      })
      clipboard.on('error', e => {
        _this.success = !_this.success;
        _this.msg = '该浏览器不支持自动复制';
        clipboard.destroy();
      })
    },

    //微信分享
    getWXShare: function () {
      let _this = this;
      let shareUrl = window.location.href;
      var params = {
        url: shareUrl,
      }
      this.$http({
        method: 'POST',
        url: '/los/api/oauth/script',
        data: params,
      }).then((result) => {
        if (result) {
          // 获取微信签名配置
          wx.config({
            debug: result.data.debug,
            appId: result.data.appId,
            timestamp: result.data.timestamp,
            nonceStr: result.data.nonceStr,
            signature: result.data.signature,
            jsApiList: result.data.jsApiList,
          });
          // 调用微信提供的分析方法
          wx.ready(function () {
            wx.onMenuShareAppMessage({
              title: '好文玩拍卖平台', // 分享标题
              desc: '你中意的 都在这里！0元起拍，臻品收藏', // 分享描述
              link: shareUrl, //分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'http://pm.haowenwan.com/public/static/images/item_logo.jpg', // 分享图标
              type: 'link', // 分享类型,music、video或link，不填默认为link
              dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
              success: function (res) {
                //									_this.shareCallback('ShareAppMessage', shareUrl)
              },
              cancel: function (err) {
                // 用户取消分享后执行的回调函数
              }
            });
            //分享朋友圈
            wx.onMenuShareTimeline({
              title: '好文玩拍卖平台' + '\n' + '你中意的 都在这里！0元起拍，臻品收藏', // 分享标题
              link: shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'http://pm.haowenwan.com/public/static/images/item_logo.jpg', // 分享图标
              success: function () {
                //									_this.shareCallback('ShareTimeline', shareUrl)
                // 用户点击了分享后执行的回调函数
              },
            });
            wx.error(function (res) {
            });
          })
        } else {
          alert('获取信息失败 请重新尝试');
        }
      }).catch((err) => {
        console.log(err);
      })
    },

    goShopPage: function (id) {
      location.href = '#/shop/id/' + id;
    },
    //分享
    share(auction_id) {
      this.show2 = !this.show2;
      this.share_auction_id = auction_id;
    },
    //计算达人推荐部分宽度
    calwidth() {
      let width = 0;
      $('.wrapper .list .expert-item').each(function () {
        let _this = this;
        width += $(_this).outerWidth(true);
      });
      return width;
    },
    //计算高度
    calHeight() {
      let height = 0;
      height = $('#head').outerHeight(true) +
        $('.banner-list').outerHeight(true) +
        $('.menu-list').outerHeight(true) +
        $('.hotsale-list').outerHeight(true) +
        $('.expert-list').outerHeight(true) +
        this.listHeight;
      return height;
    }
  },
}
</script>

<style scoped>
  #Home {
    position: relative;
    padding-bottom: 2rem;
  }

  .header {
    background: #fff;
  }

  .active {
    display: block;
  }

  .isFixed {
    position: fixed;
    z-index: 999;
    width: 100%;
    top: 0;
  }

  .wrapper {
    overflow: hidden;
  }

  /*快捷入口*/

  .menu-list {
    background-color: #fff;
  }

  .menu-list > ul {
    overflow: hidden;
    padding: 0.4rem 0.26rem;
    position: relative;
    height: 4.8rem;
  }

  .menu-list > ul li {
    width: 1.41rem;
    text-align: center;
    float: left;
    margin-right: 0.6rem;
    margin-bottom: 0.53rem;
  }

  .menu-list > ul li:nth-child(5n) {
    margin-right: 0;
  }

  .menu-list > ul li img {
    width: 0.98rem;
    height: 0.98rem;
    margin: 0.09rem;
  }

  .menu-list > ul li p {
    font-size: 0.34rem;
    color: #333;
  }

  /*滚动*/

  .menu-list .scroll {
    padding: 0 0.26rem;
    height: 1.17rem;
    line-height: 1.17rem;
    position: relative;
  }

  .menu-list .scroll:before {
    content: " ";
    position: absolute;
    left: 0;
    top: -2px;
    right: 0;
    height: 1px;
    border-top: 1px solid #e6e6e6;
    color: #e6e6e6;
    transform-origin: 0 0;
    transform: scaleY(0.5);
  }

  .menu-list .scroll img {
    float: left;
    width: 1.24rem;
    height: 0.42rem;
    margin-top: 0.37rem;
    margin-right: 0.34rem;
  }

  /*秒杀*/

  .menu-list .item.miao .item-img {
    background: -webkit-linear-gradient(rgb(28, 180, 212), rgb(115, 231, 231));
    background: -moz-linear-gradient(rgb(28, 180, 212), rgb(115, 231, 231));
    background: -o-linear-gradient(rgb(28, 180, 212), rgb(115, 231, 231));
    background: linear-gradient(rgb(28, 180, 212), rgb(115, 231, 231));
  }

  /*充值*/

  .menu-list .item.chong .item-img {
    background: -webkit-linear-gradient(rgb(254, 105, 218), rgb(244, 171, 253));
    background: -moz-linear-gradient(rgb(254, 105, 218), rgb(244, 171, 253));
    background: -o-linear-gradient(rgb(254, 105, 218), rgb(244, 171, 253));
    background: linear-gradient(rgb(254, 105, 218), rgb(244, 171, 253));
  }

  /*签到*/

  .menu-list .item.qian .item-img {
    background: -webkit-linear-gradient(rgb(243, 68, 69), rgb(253, 171, 171));
    background: -moz-linear-gradient(rgb(243, 68, 69), rgb(253, 171, 171));
    background: -o-linear-gradient(rgb(243, 68, 69), rgb(253, 171, 171));
    background: linear-gradient(rgb(243, 68, 69), rgb(253, 171, 171));
  }

  /*教程*/

  .menu-list .item.jiao .item-img {
    background: -webkit-linear-gradient(rgb(240, 148, 30), rgb(253, 209, 171));
    background: -moz-linear-gradient(rgb(240, 148, 30), rgb(253, 209, 171));
    background: -o-linear-gradient(rgb(240, 148, 30), rgb(253, 209, 171));
    background: linear-gradient(rgb(240, 148, 30), rgb(253, 209, 171));
  }

  .menu-list .item .item-text {
    margin-top: 0.24rem;
    text-align: center;
    font-size: 0.34666rem;
  }

  /*正在热卖*/

  .hotsale-list {
    margin: 0.26666rem auto;
    background-color: #fff;
  }

  .hotsale-list .item {
    padding: 0 0.26666rem 0.26666rem;
    text-align: left;
  }

  .hotsale-list .item .item-head {
    margin-bottom: 0.32rem;
  }

  .hotsale-list .item .item-head .author {
    overflow: hidden;
  }

  .hotsale-list .item .item-head .author .shopPic {
    width: 0.98rem;
    height: 0.98rem;
    float: left;
    border-radius: 0.05rem;
  }

  .hotsale-list .item .item-head .author .portrait {
    float: left;
    width: 0.96rem;
    height: 0.96rem;
    border: solid 1px #fde9c4;
    border-radius: 0.05333rem;
    display: inline-block;
  }

  .hotsale-list .item .item-head .author .info {
    float: left;
    margin-left: 0.26666rem;
    display: inline-block;
  }

  .hotsale-list .item .item-head .author .info .name {
    font-size: 0.37333rem;
    margin-bottom: 0.06rem;
  }

  .hotsale-list .item .item-head .author .info .addtime {
    font-size: 0.29333rem;
    color: #aaa;
  }

  .hotsale-list .item .item-head .author .info .level {
    margin-left: 0.26666rem;
    color: #d58e26;
    font-size: 0.29333rem;
  }

  .hotsale-list .item .item-head .author .info .level label {
    padding-left: 0.08rem;
    font-size: 0.29333rem;
  }

  .hotsale-list .item .item-head .author .focus {
    float: right;
    width: 1.36rem;
    height: 0.53rem;
    font-size: 0.32rem;
    color: #a30000;
    display: inline-block;
    border-radius: 0.05rem;
    padding: 0.05rem;
    text-align: center;
    margin: 0.13rem 0.1rem 0.13rem 0;
  }

  .hotsale-list .item .item-head .author .overflow {
    color: #aaa;
  }

  .hotsale-list .item .item-head .author .focus.vux-1px:before {
    border-color: #A30000;
    border-radius: 0.10666rem;
  }

  .hotsale-list .item .item-head .author .overflow.vux-1px:before {
    border-color: #aaa;
    border-radius: 0.10666rem;
  }

  .hotsale-list .item .item-body .tolink {
    position: relative;
  }

  .hotsale-list .item .item-body .tolink .img {
    width: 100%;
    border-radius: 0.05333rem;
    font-size: 0;
  }

  .hotsale-list .item .item-body .tolink .img img {
    width: 100%;
    height: 4.66rem;
  }

  .hotsale-list .item .item-body .tolink .endtime {
    position: absolute;
    bottom: 0;
    padding: 0 0.26666rem;
    width: 100%;
    height: 1.17333rem;
    line-height: 1.25333rem;
    font-size: 0.34666rem;
    color: #fff;
    background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 0.5));
    /*background: rgba(0, 0, 0, .3);*/
    overflow: hidden;
  }

  .hotsale-list .item .item-body .tolink .endtime i.icon-time {
    float: left;
    margin-top: 0.4rem;
    margin-right: 0.21333rem;
  }

  .hotsale-list .item .item-body .tolink .endtime .count {
    float: right;
  }

  .hotsale-list .item .item-body .tolink .icon-hot {
    position: absolute;
    top: 0;
    right: 0.56rem;
    width: 0.58666rem;
    height: 1.01333rem;
    background: url(../../assets/images/home/hot.png) center center no-repeat;
    background-size: 100% 100%;
    display: block;
  }

  .hotsale-list .item .item-body .info {
    overflow: hidden;
  }

  .hotsale-list .item .item-body .info .name {
    float: left;
    padding: 0.42666rem 0 0.53333rem;
    font-size: 0.37rem;
  }

  .hotsale-list .item .item-body .info .deliver {
    float: right;
    padding: 0.42rem 0.53rem;
  }

  .hotsale-list .item .item-body .info .deliver span {
    margin-left: 0.2rem;
    color: #eb443c;
    font-size: 0.29333rem;
    display: inline-block;
    overflow: hidden;
  }

  .hotsale-list .item .item-body .info .deliver label {
    float: left;
    margin-right: 0.05rem;
  }

  .hotsale-list .item .item-body .info .deliver label i {
    font-style: normal;
    font-size: 0.29333rem;
  }

  .hotsale-list .item .item-body .auction-info {
    overflow: hidden;
  }

  .hotsale-list .item .item-body .auction-info .info-price {
    float: left;
  }

  .hotsale-list .item .item-body .auction-info .info-price .current-price {
    color: #EB443C;
    font-size: 0.29333rem;
  }

  .hotsale-list .item .item-body .auction-info .info-price .current-price span {
    font-size: 0.45333rem;
  }

  .hotsale-list .item .item-body .auction-info ul {
    margin-top: 0.53333rem;
    overflow: hidden;
  }

  .hotsale-list .item .item-body .auction-info ul li {
    float: left;
    text-align: center;
  }

  .hotsale-list .item .item-body .auction-info ul li:nth-child(2) {
    position: relative;
    margin: 0 0.46666rem;
    padding: 0 0.46666rem;
  }

  .hotsale-list .item .item-body .auction-info ul li:nth-child(2):after,
  .hotsale-list .item .item-body .auction-info ul li:nth-child(2):before {
    position: absolute;
    top: 0.2rem;
    content: '';
    width: 0.02666rem;
    height: 0.4rem;
    background-color: #f5f5f5;
    display: block;
  }

  .hotsale-list .item .item-body .auction-info ul li:nth-child(2):after {
    right: 0;
  }

  .hotsale-list .item .item-body .auction-info ul li:nth-child(2):before {
    left: 0;
  }

  .hotsale-list .item .item-body .auction-info ul li p {
    font-size: 0.29333rem;
    color: #777;
  }

  .hotsale-list .item .item-body .auction-info ul li p.other-price {
    padding-bottom: 0.1rem;
    font-size: 0.34666rem;
  }

  .hotsale-list .item .item-body .auction-info .offer {
    float: right;
    margin-top: 0.88rem;
    padding: 0.12rem 0.1rem 0.12rem 0.18rem;
    color: #fff;
    font-size: 0.34666rem;
    text-align: center;
    letter-spacing: 0.1rem;
    background-color: #A30000;
    border-radius: 0.05333rem;
  }

  .hotsale-list .item .item-foot {
    margin-top: 0.48rem;
  }

  .hotsale-list .item .item-foot:before {
    content: '';
    border-top: solid 1px #E5E5E5;
    /*margin: 0 -0.4rem;*/
    display: block;
    transform: scaleY(0.5);
  }

  .hotsale-list .item .item-foot .tools-item {
    padding-top: 0.4rem;
    padding-bottom: 0.13333rem;
  }

  .hotsale-list .item .item-foot .tools-item a {
    float: right;
    display: inline-block;
  }

  .hotsale-list .item .item-foot .tools-item.address i.icon-address {
    margin-top: 0.04rem;
  }

  .hotsale-list .item .item-foot .tools-item span {
    float: left;
    color: #999;
    font-size: 0.32rem;
    height: 0.37rem;
    overflow: hidden;
  }

  .hotsale-list .item .item-foot .address {
    width: 4.2rem;
    display: inline-block;
    overflow: hidden;
    font-size: 0.29rem;
  }

  .hotsale-list .item .item-foot .tools-item.other {
    text-align: right;
  }

  .hotsale-list .item .item-foot .tools-item i {
    float: left;
    margin-right: 0.1rem;
  }

  /*达人推荐*/

  .expert-list {
    margin: 0.26666rem auto;
    background-color: #fff;
    position: relative;
  }

  .expert-list .list {
    padding: 10px 0.26666rem 0.66666rem;
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .expert-list .list .expert-item {
    width: 2.976rem;
    padding: 0.26666rem;
    display: inline-block;
    margin-left: 0.26666rem;
    float: left;
    text-align: center;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, .13);
  }

  .expert-list .list .expert-item img {
    width: 1.04rem;
    height: 1.04rem;
    margin-bottom: 0.16rem;
    border-radius: 0.05333rem;
  }

  .expert-list .list .expert-item .name {
    font-size: 0.34666rem;
    height: 0.5rem;
    overflow: hidden;
  }

  .expert-list .list .expert-item .good {
    padding: 0.26666rem 0 0.34666rem;
    font-size: 0.29333rem;
    color: #aaa;
  }

  .expert-list .list .expert-item .focus {
    width: 100%;
    height: 0.64rem;
    color: #fff;
    font-size: 0.32rem;
    line-height: 0.64rem;
    background-color: #999;
    border-radius: 0.05333rem;
    display: block;
  }

  .expert-list .list .expert-item .onfocus {
    width: 100%;
    height: 0.64rem;
    color: #fff;
    font-size: 0.32rem;
    line-height: 0.64rem;
    background-color: #A30000;
    border-radius: 0.05333rem;
    display: block;
  }

  .expert-list .list .expert-item:first-child {
    margin-left: 0;
  }

  /*列表项*/

  .product-list {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
  }

  .product-list .list {
    width: 100%;
    padding: 0.26rem 0.26rem 0 0.13rem;
    background-color: #fff;
    overflow-y: auto;
  }

  .product-list .list .item {
    position: relative;
    float: left;
    width: 50%;
    padding-left: 0.13333rem;
    margin-bottom: 0.26666rem;
  }

  .product-list .list .item .img {
    position: relative;
    font-size: 0;
  }

  .product-list .list .item .img img {
    width: 100%;
    height: 3.92rem;
  }

  .product-list .list .item .img .time {
    width: 100%;
    height: 0.66666rem;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 0.26666rem;
    font-size: 0.26666rem;
    color: #fff;
    line-height: 0.72rem;
    background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 0.5));
  }

  .product-list .list .item .pass {
    position: absolute;
    z-index: 10;
    right: 0;
    background: #aaa;
    color: #fff;
    width: 1.41rem;
    height: 0.53rem;
    font-size: 0.32rem;
    margin-left: 0.26rem;
    display: inline-block;
    line-height: 0.53rem;
    text-align: center;
    border-bottom-left-radius: 0.1rem;
    border-bottom-right-radius: 0.1rem;
  }

  .product-list .list .item .info {
    padding: 0.32rem 0.21333rem 0.34666rem;
    border-left: solid 1px #e6e6e6;
    border-right: solid 1px #e6e6e6;
    border-bottom: solid 1px #e6e6e6;
    height: 1.7rem;
  }

  .product-list .list .item .info .name {
    font-size: 0.34666rem;
    padding-bottom: 0.1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .product-list .list .item .info .name span {
    background: #e93d5e;
    color: #fff;
    font-size: 0.29rem;
    padding: 0.01rem 0.1rem;
    border-radius: 0.05rem;
    margin-right: 0.05rem;
    float: left;
  }

  .product-list .list .item .info .price {
    color: #aaa;
    font-size: 0.29333rem;
    float: left;
    margin-top: 0.13rem;
  }

  .product-list .list .item .info .price span {
    color: #EB443C;
    font-size: 0.34666rem;
  }

  .product-list .list .item .info .liulan {
    float: right;
    margin-top: 0.13rem;
  }

  .product-list .list .item .info .liulan span {
    font-size: 0.34rem;
    color: #aaa;
  }

  .product-list .list .item .icon-auction {
    position: absolute;
    top: 0;
    left: 0.3rem;
    padding: 0.05rem 0.1rem;
    color: #fff;
    font-size: 0.32rem;
    background-color: #db4342;
    border-bottom-left-radius: 0.05333rem;
    border-bottom-right-radius: 0.05333rem;
  }

  /*分享*/

  .share-list {
    height: 100%;
    padding: 0.26rem;
  }

  .share-list ul {
    overflow: hidden;
  }

  .share-list ul li {
    float: left;
    width: 33.33%;
    text-align: center;
  }

  .share-list ul li p {
    margin-top: 0.2rem;
  }

  #light b {
    font-size: 0.4rem;
    line-height: 0.4rem;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    margin: 0.26rem 0 0.37rem 0;
    display: block;
  }

  #light {
    overflow: hidden;
  }

  #light .proInfo {
    font-size: 0.37rem;
    line-height: 0.5rem;
    padding: 0.26rem;
  }

  #light img {
    padding: 0.26rem;
    width: 100%;
    height: 100%;
  }

  .black_overlay {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
    z-index: 1001;
    overflow: hidden;
  }

  .white_content {
    display: none;
    position: absolute;
    top: 1.2rem;
    left: 0.64rem;
    height: 13.44rem;
    width: 8.77rem;
    margin: 0 auto;
    border-radius: 0.13rem;
    z-index: 1002;
    overflow: auto;
  }

  .nextPage {
    width: 8.56rem;
    height: 1.3rem;
    left: 0.72rem;
    background: #a30000;
    color: #fff;
    line-height: 1.3rem;
    text-align: center;
    border-radius: 0.05rem;
    font-size: 0.4rem;
    margin: 2rem auto 0.4rem;
  }

  .white_content .close {
    background: #a30000;
    height: 1rem;
    display: block;
    width: 100%;
    color: #fff;
    font-size: 0.4rem;
    line-height: 1rem;
    text-align: center;
  }

  /*悬浮按钮*/

  .button {
    position: fixed;
    right: 0.4rem;
    bottom: 2.37rem;
    z-index: 999;
  }

  .button img {
    width: 1.6rem;
    height: 1.6rem;
  }

  .expert-list .title-box b {
    position: absolute;
    right: 0.26rem;
    top: 0.3rem;
    font-size: 0.32rem;
    font-weight: normal;
    color: #ccc;
  }

  .expert-list .title-box img {
    position: absolute;
    width: 0.32rem;
    height: 0.32rem;
    right: 1.4rem;
    top: 0.36rem;
  }

  .no-data {
    width: 2.96rem;
    height: 2.96rem;
    margin: 1.5rem auto;
  }

  .no-data img {
    width: 100%;
  }

  .advert-wrap {
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    overflow: hidden;
    background: #fff;
    padding: 0 0.26rem;
  }

  .advert-wrap .horn {
    float: left;
    width: 0.4rem;
    height: 0.37rem;
    margin: 0.2rem 0.26rem 0 0.13rem;
  }

  .advert-wrap .del {
    float: right;
    width: 0.37rem;
    height: 0.37rem;
    margin-top: 0.2rem;
  }
</style>
<style>
  .product-list .item .count-down .endtxt,
  .product-list .item .count-down .starttxt,
  .product-list .item .count-down .tiptxt,
  .product-list .item .count-down .day,
  .product-list .item .count-down .hour,
  .product-list .item .count-down .minute,
  .product-list .item .count-down .seconds,
  .product-list .item .count-down i {
    font-size: 0.29333rem;
    display: inline-block;
  }

  .hotsale-list .item .count-down .endtxt,
  .hotsale-list .item .count-down .starttxt,
  .hotsale-list .item .count-down .tiptxt,
  .hotsale-list .item .count-down .day,
  .hotsale-list .item .count-down .hour,
  .hotsale-list .item .count-down .minute,
  .hotsale-list .item .count-down .seconds,
  .hotsale-list .item .count-down i {
    font-size: 0.34666rem;
    display: inline-block;
  }

  #Home .advert-wrap .weui-cells {
    height: 100%;
    line-height: 100%;
  }

  #Home .advert-wrap .vux-marquee {
    float: left;
  }

  #Home .advert-wrap .vux-marquee,
  #Home .advert-wrap .vux-marquee ul {
    width: 84%;
    /*padding: 0 0.26rem;*/
    height: 0.8rem;
    line-height: 0.8rem;
    color: #e93d5e;
  }

  #Home .advert-wrap .weui-cells:after,
  #Home .advert-wrap .weui-cells:before {
    border: none !important;
  }
</style>
